import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts
import "./components"  // 导入自定义组件

Window {
    width: 640
    height: 480
    visible: true
    title: "联系人列表"

    // 添加新联系人
    ContactDialog {
        id: addContactDialog
        isEdit: false
        anchors.centerIn: parent
        
        onContactConfirmed: function(name, phone) {
            dataModel.addContact(name, phone)
        }
    }

    // 修改联系人
    ContactDialog {
        id: editContactDialog
        isEdit: true
        anchors.centerIn: parent

        onContactConfirmed: function(name, phone) {
            // 处理编辑联系人的逻辑
             dataModel.editContact(currentEditIndex, name, phone)
        }
    }

    property int currentEditIndex: -1

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 10
        spacing: 10

        // 顶部工具栏
        Rectangle {
            Layout.fillWidth: true
            height: 50
            color: "#f0f0f0"
            radius: 5

            RowLayout {
                anchors.fill: parent
                anchors.margins: 5
                spacing: 10

                CustomTextField {
                    id: searchField
                    Layout.fillWidth: true
                    placeholderText: "搜索联系人..."
                    leftIcon: "qrc:/icons/find.png"
                    onTextChanged: dataModel.searchContacts(text)
                    onRightIconClicked: {
                        text = ""
                        dataModel.clearSearch()
                    }
                }

                IconButton {
                    text: "添加联系人"
                    iconSource: "qrc:/icons/add.png"
                    //showBorder: true
                    //borderColor: "#BBDEFB"
                    //borderWidth: 1
                    showBackground: true
                    backgroundColor: "#BBDEFB"
                    onClicked: addContactDialog.open()
                }
            }
        }

        // 联系人列表
        ListView {
            Layout.fillWidth: true
            Layout.fillHeight: true
            model: dataModel
            spacing: 10
            clip: true

            delegate: Rectangle {
                width: ListView.view.width
                height: 80
                color: "#f0f0f0"
                radius: 5

                // 鼠标悬停效果
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered: parent.color = "#e0e0e0"
                    onExited: parent.color = "#f0f0f0"
                }

                RowLayout {
                    anchors.fill: parent
                    anchors.margins: 10
                    spacing: 15

                    // 首字母头像
                    Rectangle {
                        width: 60
                        height: 60
                        radius: width / 2
                        color: {
                            const colors = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEEAD", "#D4A5A5", "#9B59B6"]
                            return colors[firstLetter.charCodeAt(0) % colors.length]
                        }

                        Text {
                            anchors.centerIn: parent
                            text: firstLetter
                            color: "white"
                            font.pixelSize: 24
                            font.bold: true
                        }
                    }

                    // 联系人信息
                    ColumnLayout {
                        Layout.fillWidth: true
                        spacing: 5

                        Text {
                            text: name
                            font.bold: true
                            font.pixelSize: 16
                            Layout.fillWidth: true
                        }

                        Text {
                            text: phone
                            color: "#666666"
                            font.pixelSize: 14
                            Layout.fillWidth: true
                        }
                    }

                    // 操作按钮
                    RowLayout {
                        spacing: 10

                        // 编辑按钮
                        IconButton {
                            iconSource: "qrc:/icons/edit.png"
                            onClicked: {
                                currentEditIndex = index
                                editContactDialog.currentName = name
                                editContactDialog.currentPhone = phone
                                editContactDialog.open()
                            }
                        }

                        // 删除按钮
                        IconButton {
                            iconSource: "qrc:/icons/delete.png"
                            onClicked: dataModel.removeContact(index)
                        }
                    }
                }
            }
        }
    }
}
